<template>
	<view style="padding: 20rpx;background: #e5e5e5;width: 100%;height: 100%;box-sizing: border-box;" >
		<view class="box" v-if="commentList.length" v-for="item in commentList" :key="item.id">
			<view  style="padding: 20rpx 0;border-bottom: 2rpx solid #eee;box-sizing: border-box;">
				
				<view style="display: flex;grid-gap: 20rpx;">
					<view style="display: flex;flex-direction: column;align-items: center;">
						<image :src="user.avatar" mode="widthFix" style="width: 120px;border-radius: 50%;height: 120rpx;">
						</image>
						{{user.username}}
					</view>
					<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
						<view style="flex: 1;padding-top: 10rpx;font-size: 24rpx;">{{item.content}}</view>
						<uni-rate :value="item.star" readonly></uni-rate>
					</view>
					<view style="font-size: 24rpx;color: #888;display: flex;align-items: flex-end;">
						{{item.time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		import $H from '../../utils/request.js';
	export default {
		data() {
			return {
				commentList: [],
				user: uni.getStorageSync('userinfo')
			}
		},
		onLoad() {
			this.load()
		},
		methods: {
			load() {
				$H.post("comment/all?userId="+this.user.id).then(res=>{
					console.log(res)
					this.commentList=res
				})

			}
		}
	}
</script>

<style>
.box{
	padding: 10px;
	width: 100%;
background: #fff;
box-sizing: border-box;
}
</style>